<template>
  <div class="help">
    <group label-width="85px">
      <datetime :min-year="1970" placeholder="请选择" v-model="form.startTime" format="YYYY-MM-DD HH:mm" title="开始时间"></datetime>
      <datetime :min-year="1970" placeholder="请选择" v-model="form.endTime" format="YYYY-MM-DD HH:mm" title="送达时间"></datetime>
      <x-input ref="phoneValid" autocomplete="off" title="联系方式" v-model="form.tel" name="mobile" placeholder="请输入联系方式" keyboard="number" is-type="china-mobile"></x-input>
      <selector placeholder="请选择" title="服务类型" :options="serviceList" v-model="form.desc"></selector>
      <x-textarea title="需求描述" :max="800" placeholder="详细服务内容" v-model="form.note" ></x-textarea>
      <x-input type="number" v-model="form.price" title="服务价格" placeholder="请输入服务价格"></x-input>
    </group>
    <x-button @click.native="isValid" class="submit" type="primary">提交订单</x-button>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import { getUnixTime } from '../../js/utils'
import {
  Datetime,
  Group,
  XButton,
  Selector,
  XInput,
  XTextarea
} from 'vux';

const IndexStore = namespace('publish');

@Component({
  components: {
    Selector,
    Datetime,
    Group,
    XButton,
    XInput,
    XTextarea
  }
})
export default class HelpIndex extends Vue {
  @IndexStore.Action getCreatePaotui;
  form = {
    startTime: '',
    endTime: '',
    tel: '',
    desc: '',
    note: '',
    price: '',
    type: 1
  }
  serviceList = ['体力型', '智力型']
  validTime = false
  isValid () {
    let flag = true
    const { startTime, endTime, tel, desc, note, price } = this.form
    const phoneValid = this.$refs.phoneValid.valid
    if (!price) {
      flag = false
      this.$vux.toast.text('请输入服务价格', 'middle');
    }
    if (!note) {
      flag = false
      this.$vux.toast.text('请输入需求描述', 'middle');
    }
    if (!desc) {
      flag = false
      this.$vux.toast.text('请选择服务类型', 'middle');
    }
    if (!phoneValid) {
      flag = false
      this.$vux.toast.text('手机号码格式不正确', 'middle')
    }
    if (!tel) {
      flag = false
      this.$vux.toast.text('请输入手机号码', 'middle')
    }
    if (!endTime) {
      flag = false
      this.$vux.toast.text('请输入送达时间', 'middle');
    }
    if (!startTime) {
      flag = false
      this.$vux.toast.text('请输入开始时间', 'middle');
    }
    if (flag) {
      this.confirmShowNumTips()
    }
  }
  confirmShowNumTips () {
    const startTime = new Date(this.form.startTime).getTime()
    const endTime = new Date(this.form.endTime).getTime()
    if (endTime - startTime < 30 * 60 * 1000 && this.validTime == false) {
      const _this = this;
      this.$vux.confirm.show({
        title: '提示',
        content: '时间间隔少于30分钟，您确定要提交订单吗？',
        confirmText: '确定',
        cancelText: '取消',
        onConfirm () {
          _this.validTime = true;
          _this.confirmShowNumTips()
        }
      })
      return;
    } else {
      this.validTime = true
    }
    this.doPublish()
  }
  doPublish () {
    const { startTime, endTime, desc, tel, note, price, type } = this.form
    const params = {
      startTime: getUnixTime(startTime),
      endTime: getUnixTime(endTime),
      tel: tel,
      desc: desc,
      note: note,
      price: price,
      type: type
    }
    this.getCreatePaotui(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.$vux.toast.text('发布成功', 'middle');
        // window.location.reload();
        this.$router.push({path: '/errand/square', query: {type: 1}});
      }
    })
  }
}
</script>
<style lang="less">
  .help {
    .submit {
      position: absolute;
      bottom: 0;
      margin: 0 auto;
    }
    .weui-cell_access .weui-cell__ft {
      text-align: left!important;
      // margin-left: 1em;
    }
  }
</style>
